<template>
  <div class="login-con">
    <div class="login-icon">
      <img src="../../public/images/loginBgIcon.png" />
    </div>
    <div class="login-box">
      <div class="login-title">登录</div>
      <div class="login-input">
        <div class="item">
          <div class="item-title">用户名称</div>
          <input
            type="text"
            placeholder="请输入用户名称"
            v-model="user_name"
            @keydown.enter="login"
            @focus="errorTipVisible = false"
          />
        </div>
        <div class="item">
          <div class="item-title">登录密码</div>
          <input
            type="password"
            placeholder="请输入密码"
            v-model="user_password"
            @keydown.enter="login"
            @focus="errorTipVisible = false"
          />
        </div>
        <div class="item">
          <div class="item-title">图片验证码</div>
          <div class="item-captcha">
            <input
              class="item-captcha-input"
              type="text"
              placeholder="请输入验证码"
              v-model="user_captcha"
              @keydown.enter="login"
              @focus="errorTipVisible = false"
            />
            <div class="login-verifycode" id="verfiyCodeDom" @click="getCodeImg"></div>
          </div>
        </div>
      </div>
      <div class="login-button" @click="login">登录</div>
      <div class="error-tip" v-if="errorTipVisible">
        <i class="el-icon-warning"></i>
        {{ errorTip }}
      </div>
    </div>
  </div>
</template>

<script>
import JSEncrypt from "jsencrypt";
import CodeVerfiy from "@/utils/codeverify";

export default {
  name: "login",

  data() {
    return {
      user_name: "",
      user_password: "",
      user_captcha: "",
      codeImg: "",
      publicKey: "",
      errorTipVisible: false,
      errorTip: "用户名或密码不正确",
      verfiycode: "",
    };
  },

  mounted() {
    this.getCodeImg();
  },

  methods: {
    // 获取rsa加密公钥
    getPublickey() {
      this.axios.get(this.apis.getPublickey).then((res) => {
        if (res.retCode === 2000) {
          // let encode = atob(res.rows.public_key_pem);
          // let encode = btoa(res.rows.public_key_pem);
          this.publicKey = decodeURI(res.rows.public_key_pem);
          this.publicKey = this.publicKey.replace(/\n/g, "");
        }
      });
    },

    encode(str) {
      let encode = encodeURI(str);
      let base64 = btoa(encode);
      return base64;
    },

    // 获取图形验证码
    async getCodeImg() {
      const res = await this.axios.get(this.apis.getCodeImg);
      if (res.retCode === 2000) {
        if (this.verfiycode) {
          this.verfiycode.refresh(res.rows);
        } else {
          this.verfiycode = new CodeVerfiy({
            id: "verfiyCodeDom",
            type: "blend",
            width: "120",
            height: "42",
            defaultCode: res.rows,
          });
        }
      }
      this.getPublickey();
    },

    // 登录
    login() {
      if (this.user_name === "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return;
      }
      if (this.user_password === "") {
        this.$message({
          message: "请输入登录密码",
          type: "warning",
        });
        return;
      }
      if (this.user_captcha === "") {
        this.$message({
          message: "请输入验证码",
          type: "warning",
        });
        return;
      }

      let enc = new JSEncrypt();
      enc.setPublicKey(this.publicKey);

      let params = {
        pu: enc.encrypt(this.user_name),
        pw: enc.encrypt(this.user_password),
        code: this.user_captcha,
      };
      this.axios
        .post(this.apis.checkLogin, params)
        .then((res) => {
          if (res.retCode === 2000) {
            if (res.rows.status === '1') {
              this.$message.warning('当前用户被禁用！')
            }else{
              this.$message.success('登录成功!')
              this.$router.push({ path: "/" });
            }
          } else if (res.retCode === 3003) {
            this.errorTip = res.retMessage;
            this.errorTipVisible = true;
            this.getCodeImg();
          } else {
            this.errorTip = "用户名或密码不正确";
            this.errorTipVisible = true;
            this.getCodeImg();
          }
        })
        .catch(() => {
          this.getCodeImg();
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login-con {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(37, 193, 246, 1) 0%,
    rgba(27, 169, 240, 1) 47%,
    rgba(16, 142, 233, 1) 100%
  );
  position: absolute;
  left: 0;
  top: 0;
  .login-icon {
    width: 838px;
    height: 738px;
    position: absolute;
    left: 96px;
    top: 50%;
    transform: translate(0, -50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login-box {
    width: 620px;
    height: 620px;
    position: absolute;
    right: 190px;
    top: 50%;
    transform: translate(0, -50%);
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
    border-radius: 8px;
    .login-title {
      font-size: 40px;
      font-weight: 600;
      color: #2297f3;
      line-height: 56px;
      text-align: center;
      margin-top: 60px;
    }
    .login-input {
      width: 100%;
      padding: 0 60px;
      box-sizing: border-box;
      .item {
        padding-top: 30px;
        .item-title {
          font-size: 16px;
          font-weight: 500;
          color: #333333;
          line-height: 22px;
        }
        input {
          width: 100%;
          height: 50px;
          margin-top: 10px;
          border: none;
          outline: none;
          box-shadow: 0px 1px 0px 0px rgba(217, 217, 217, 1),
            0px 0px 0px 0px rgba(217, 217, 217, 1),
            0px 0px 0px 0px rgba(217, 217, 217, 1),
            1px 0px 0px 0px rgba(217, 217, 217, 1);
          border-radius: 4px;
          padding: 0 20px;
          box-sizing: border-box;
          color: #333333;
          font-size: 16px;
          line-height: 22px;
          &::placeholder {
            color: #cccccc;
          }
        }
        .item-captcha {
          width: 100%;
          display: flex;
          align-items: flex-end;
        }
        .item-captcha-input {
          width: 364px;
        }
        .item-captcha-img {
          width: 129px;
          height: 50px;
          margin-left: 5px;
        }
      }
    }
    .login-button {
      width: 500px;
      height: 68px;
      margin: 0 auto;
      margin-top: 40px;
      background: #2297f3;
      border-radius: 4px;
      color: #ffffff;
      font-size: 24px;
      text-align: center;
      line-height: 68px;
      cursor: pointer;
    }
    .error-tip {
      width: 100%;
      padding: 10px 60px;
      box-sizing: border-box;
      font-size: 12px;
      color: #dc2303;
      line-height: 17px;
      > i {
        color: #ff2500;
        font-size: 20px;
      }
    }
  }
}
</style>
